<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: 陈鑫茹 2182688619@qq.com
 * @LastEditTime: 2025-09-28 19:18:01
-->
<template>
  <div class="dashboard-container">
    <div class="stats-cards">
      <div class="stat-card total-devices">
        <div class="card-title">设备总数</div>
        <div class="card-value">5个</div>
      </div>
      <div class="stat-card online-devices">
        <div class="card-title">在线设备数</div>
        <div class="card-value">4个</div>
      </div>
      <div class="stat-card offline-devices">
        <div class="card-title">离线设备数</div>
        <div class="card-value">1个</div>
      </div>
      <div class="stat-card total-projects">
        <div class="card-title">工程总数</div>
        <div class="card-value">5个</div>
      </div>
      <div class="stat-card total-orders">
        <div class="card-title">工单总数</div>
        <div class="card-value">27个</div>
      </div>
    </div>
    <Map style="height: 400px; width: 475px;" />

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 三个组件展示区域 -->
        <div class="components-grid">
          <div class="component-item">
            <C221 />
          </div>
          <div style="display: flex;">
            <div class="component-item">
              <C222 />
            </div>
            <div class="component-item">
              <C223 />
            </div>
          </div>
        </div>

        <!-- 柱状图容器 -->
        <div ref="right1" class="chart-container"></div>
      </div>
    </div>
</template>

<script>
import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import C223 from './components/C223.vue'
import Map from './components/Map.vue'
export default {
  // 局部注册
  components: {
    C221,
    C222,
    C223,
    Map
  },
  data() {
    return {
      columnData: [],
    };
  },
  computed: {},
  methods: {},
  created() { },
};
</script>
<style scoped>
.dashboard-container {
  /* 内边距 */
  padding: 20px;
}

/* 转成一行 */
.stats-cards {
  display: flex;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  /* 与下方内容保持间距 */
}

.stat-card {
  /* 弹性系数 */
  flex: 1;
  padding: 24px;
  /* 边角圆框 */
  border-radius: 10px;
  color: white;
  font-family: '微软雅黑', sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 字体大小 外边距 */
.card-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 数值大小 字体加粗 */
.card-value {
  font-size: 24px;
  font-weight: bold;
}

/* 设置各个卡片颜色 */
.total-devices {
  background-color: #f1b74b;
}

.online-devices {
  background-color: #fda065;
}

.offline-devices {
  background-color: #f86b66;
}

.total-projects {
  background-color: #e83832;
}

.total-orders {
  background-color: #da60e7;
}

/* 核心：左右布局容器 */
.main-content {
  display: flex;
  /* 启用flex布局 */
  gap: 20px;
  /* 左右元素间距 */
  width: 100%;
  box-sizing: border-box;
}

/* 右侧内容区域 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 图表容器 */
.charts-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
</style>